<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #app table tr:first-child {
            background-color: aqua;
        }

        img {
            width: 30px;
            height: 30px;
        }
        td{
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <table style="width: 100%;" border="1" cellpadding="0" cellspacing="0">
            <tr>
                <th>ID</th>
                <th>商品名称</th>
                <th>价格</th>
                <th>图片</th>
                <th>操作</th>
            </tr>
            <tr v-for="good in goods">
                <td>{{good.id}}</td>
                <td>{{good.name}}</td>
                <td>{{good.price}}</td>
                <td><img :src="good.img" alt=""></td>
                <td><button @click="del(good.id)">删除</button>|<button @click="openUpdate(good.id)">修改</button></td>
            </tr>
        </table>
        <a href="add.html">新增商品</a>
    </div>


    <script>
        const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: "首页",
                    goods: [

                    ]
                }
            },
            mounted() {
                console.log(this.$refs);
                
                this.showData()
            },
            methods: {
                showData() {
                    axios.get('http://127.0.0.1:8888/goods')
                        .then(response => {//注意：此处统一使用箭头函数
                            this.goods = response.data

                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                },
                del(id) {
                    //发送delete请求，删除数据
                    //更新goods数据
                    axios.delete('http://127.0.0.1:8888/goods/' + id)
                        .then(response => {
                            console.log("删除成功");
                            this.showData();
                        })
                },
                openUpdate(id){
                    console.log(id);
                    window.location.href = "update.html?id="+id
                    
                }
            },
        }).mount("#app")
    </script>
</body>

</html>